<template>
    <form class="login-form">
        <h3 class="form-title font-green">登录</h3>
        <div v-if="loginInvalid" class="alert alert-danger">
            <button class="close"></button>
            <span> 登录失败！请输入正确的用户名和密码。 </span>
        </div>
        <div class="form-group">
            <label class="control-label">用户名</label>
            <input ref="userName" class="form-control form-control-solid placeholder-no-fix" @keyup.enter="$refs.passport.focus()" v-model="account.UserName" type="text" autocomplete="off" placeholder="请输入用户名" /> 
        </div>
        <div class="form-group">
            <label class="control-label">密码</label>
            <input ref="passport" class="form-control form-control-solid placeholder-no-fix" @keyup.enter="login()" v-model="account.Password" type="password" autocomplete="off" placeholder="请输入密码" /> 
        </div>
        <div class="form-actions">
            <button type="button" class="btn green uppercase" :disabled="disable" @click="login()">登录</button>
            <label class="rememberme check mt-checkbox mt-checkbox-outline">
                <input type="checkbox" name="remember" v-model="rememberPwd" />记住登录密码
                <span></span>
            </label>
            <a href="javascript:;" id="forget-password" class="forget-password" v-if="false">忘记密码了吗?</a>
        </div>
        <div class="create-account">
            <p>
                <!-- <a href="javascript:;" id="register-btn" class="uppercase">创建新的用户</a> -->
            </p>
            <br>
        </div>
    </form>  
</template>

<script>
export default {
    data() {
        return {
            disable: false,
            loginInvalid: false,
            rememberPwd: true,
            account: {
                UserName: null,
                Password: null
            }
        }
    },
    mounted() {

        // 自动选中用户名
        this.$refs.userName.focus();

        // 如果用户已经登录，则自动跳转到dashboard页面
        if(this.$AuthorizeService.hasLogin()) {
            if(this.authorize(['USER'])) {
                this.$router.replace({name: 'session'});
            } else {
                this.$router.replace({name: 'dashboard'});
            }
        }

        // 恢复记住密码
        let memory = this.$AuthorizeService.getMemory();
        if(memory) {
            this.account = memory;
            this.rememberPwd = true;
        }
    },
    methods: {
        // 用户登录
        login() {
            this.disable = true;
            this.loginInvalid = !(this.account.UserName || this.account.Password);
            this.$AuthorizeService.login(this.account)
                .then(ret => {
                    this.disable = false;
                    this.loginInvalid = !ret;
                    if (ret) {
                        if(this.authorize(['USER'])) {
                            this.$router.replace({name: 'session'});
                        } else {
                            this.$router.replace({name: 'dashboard'});
                        }

                        // 记住密码
                        if (this.rememberPwd) {
                            this.$AuthorizeService.rememberPassword(this.account);
                        }
                    } else {
                        this.account.Password = null;
                    }
                }, err => {
                    this.disable = false;
                    this.loginInvalid = true;
                    this.account.Password = null;
                });
        }
    }
}
</script>

<style>

</style>
